import { Scene } from 'phaser';

import sky from '../../../../assets/resources/demo/space3.png';
import logo from '../../../../assets/resources/demo/phaser3-logo.png';
import red from '../../../../assets/resources/demo/red.png';

const resources = { sky, logo, red };

class DemoScene extends Scene {
  constructor() {
    super('demo');
  }

  preload() {
    this.load.setBaseURL(window.location.origin);
    Object.keys(resources).forEach(key => this.load.image(key, `${resources[key]}`));
  }

  create() {
    this.add.image(400, 300, 'sky');

    const particles = this.add.particles('red');

    const emitter = particles.createEmitter({
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: 'ADD',
    });

    const phaserLogo = this.physics.add.image(400, 100, 'logo');
    phaserLogo.setVelocity(100, 200);
    phaserLogo.setBounce(1, 1);
    phaserLogo.setCollideWorldBounds(true);

    emitter.startFollow(phaserLogo);

    this.input.on('pointerdown', () => {
      this.scene.start('demo/main', { number: 0 });
    });
  }
}

export default DemoScene;
